{% extends 'users/member/user_info.html' %}


{% block member %}
<div class="tabs">
    <ul>
      <li class="is-active"><a>收货地址</a></li>
    </ul>
</div>

<div class="columns is-multiline">
    {% if address_list %}
    {% for addr in address_list %}
    <div class="column is-6">
        <div class="box is-border is-shadowless">
            {% if addr.is_default %}
            <span class="tag is-primary">默认</span>
            {% endif %}
            {{ addr.signer_name }}{{ addr.signer_mobile }}
            <p class="has-text-grey-dark is-size-7">
                {{ addr.province }}{{ addr.city }}{{ addr.district }}{{ addr.address }}
            </p>
            <nav class="level is-size-7 mt-4 is-mobile">
                <div class="level-left"></div>
                <div class="level-right">
                    {% if not addr.is_default %}
                    <div class="level-item">
                        <a href="{% url 'users:addr_default' request.user.id addr.id  %}">设为默认</a> 
                    </div>
                    {% endif %}
                    <div class="level-item">
                        <a href="{% url 'users:addr_update' request.user.id addr.id %}">修改</a> 
                    </div>
                    <div class="level-item">
                        <a href="{% url 'users:addr_delete' request.user.id addr.id  %}">删除</a> 
                    </div>
                    
                </div>
            </nav>
        </div>
    </div>
    {% endfor %}
    {% endif %}
    <div class="column is-6">
        <div class="box is-border has-text-grey-light has-text-centered is-shadowless" 
            style="cursor: pointer;" @click="addAddressModal()">
            <div class="is-medium pt-5 pb-5">
                <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M13 20H13.09A5.5 5.5 0 0 0 13.81 22H9A2 2 0 0 1 11 20V12H3.5L6 9.5L3.5 7H11V3L12 2L13 3V7H18L20.5 9.5L18 12H13M18 15V18H15V20H18V23H20V20H23V18H20V15Z" />
                </svg>
                <span>添加新地址</span>
            </div>
        </div>
        
       
        <div class="modal" :class="{ 'is-active': active }">
            <div class="modal-background"></div>
            <div class="modal-card">
              <header class="modal-card-head">
                <p class="modal-card-title">添加新地址</p>
                <button class="delete" aria-label="close" @click="closeAddressModal()"></button>
              </header>
              <section class="modal-card-body">
                <!-- Content ... -->
                <b-field label="省份" :label-position="labelPosition">
                    <b-input v-model="province" required validation-message="不能为空!"></b-input>
                </b-field>
                <b-field label="城市" :label-position="labelPosition">
                    <b-input v-model="city" required validation-message="不能为空!"></b-input>
                </b-field>
                <b-field label="区域" :label-position="labelPosition">
                    <b-input v-model="district" required validation-message="不能为空!"></b-input>
                </b-field>
                <b-field label="详细地址" :label-position="labelPosition">
                    <b-input v-model="address" required validation-message="不能为空!"></b-input>
                </b-field>
                <b-field label="签收人" :label-position="labelPosition">
                    <b-input v-model="signer_name" required validation-message="不能为空!"></b-input>
                </b-field>
                <b-field label="手机号" :label-position="labelPosition">
                    <b-input v-model="signer_mobile" maxlength=11 required validation-message="不能为空!"></b-input>
                </b-field>
                <b-field label="邮箱" :label-position="labelPosition">
                    <b-input v-model="email" type="email" validation-message="请输入正确的邮箱格式！"></b-input>
                </b-field>
                <b-field :label-position="labelPosition">
                    <b-checkbox v-model="is_default">是否设为默认</b-checkbox>
                </b-field>
                
                {% comment %}
                <div class="field">
                <label for="id_province" class="label">省</label>
                <div class="control">
                    <input class="input is-small" v-model="province" type="text" name="province" maxlength="100" id="id_province" placeholder="省份名称">
                </div>
                </div>
                <div class="field">
                    <label class="label" for="id_city">市:</label>
                    <div class="control">
                        <input class="input is-small" v-model="city" type="text" name="city" maxlength="100" id="id_city" placeholder="城市名称">
                    </div>
                </div>
                <div class="field">
                    <label class="label" for="id_district">区:</label>
                    <div class="control">
                        <input class="input is-small" v-model="district" type="text" name="district" maxlength="100" id="id_district" placeholder="所属区/县">
                    </div>
                </div>
                <div class="field">
                    <label class="label" for="id_address">详细地址:</label>
                    <div class="control">
                        <input class="input is-small" v-model="address" type="text" name="address" maxlength="100" id="id_address" placeholder="详细住址，快递可配送的地址">
                    </div>
                </div>
                
                <div class="field">
                    <label class="label" for="id_signer_name">签收人:</label>
                    <div class="control">
                        <input class="input is-small" v-model="signer_name" type="text" name="signer_name" maxlength="100" id="id_signer_name" placeholder="收货人姓名">
                    </div>
                </div>
                <div class="field">
                    <label class="label" for="id_signer_mobile">手机号:</label>
                    <div class="control">
                        <input class="input is-small" v-model="signer_mobile" type="text" name="signer_mobile" maxlength="11" id="id_signer_mobile" placeholder="手机号，可正常接听">
                    </div>
                </div>
                <div class="field">
                    <label class="label" for="id_email">电子邮箱:</label>
                    <div class="control">
                        <input class="input is-small" v-model="email" type="email" name="email" maxlength="30" id="id_email" placeholder="请正确填写邮箱地址，用于接收订单信息">
                    </div>
                </div>
                <div class="field">
                    <label class="label" for="id_is_default">
                        <input class="radio" v-model="is_default" type="checkbox" name="is_default" id="id_is_default">
                        是否设为默认
                    </label>
                </div>
                {% endcomment %}
              </section>
              <footer class="modal-card-foot">
                <button class="button is-success" @click="saveAddressModal()">保存</button>
                <button class="button" @click="closeAddressModal()">取消</button>
              </footer>
            </div>
        </div>
        
    </div>
</div>
{% endblock %}